import { Component } from "react";
// import { Link, NavLink, Route } from "react-router-dom";
import { Route, Switch, Redirect } from "react-router-dom";

import AppStyle from "./assets/App.module.css";
import User from "./pages/User/User";
import Home from "./pages/Home/Home";
import Empty from "./pages/Empty/Empty";
import Header from "./components/Header/Header";
import MyNavlink from "./components/MyNavlink/MyNavlink";
/**
 * 1、最外层包裹了一个<BrowserRouter>或<HashRouter>
 * 2、路由切换使用Link/NavLink标签
 *    <Link to="/xxx"></Link>
 * 3、展示区用Route标签进行路径的匹配
 *    <Route path="匹配的路径" component={展示的组件}>
 * 4、路由组件props默认接收三个固定的属性：history、location、match
 * 5、一般组件props是标签传递了什么，则接收什么
 * 6、NavLink标签会在点击时“默认”增加一个“active” class属性名,此时可以设置点击样式
 *    为了防止命名冲突，可以设置activeClassName="xxx",将xxx设置为点击时增加的class属性名
 *
 */

class App extends Component {
  render() {
    return (
      <div className={AppStyle.page}>
        <Header id={"我是id"}></Header>
        <div className={AppStyle.container}>
          <div className={AppStyle.nav}>
            <MyNavlink to="/user">显示User</MyNavlink>
            <MyNavlink to="/home">显示Home</MyNavlink>
          </div>
          {/* 
                  1、重定向，作为一个兜底选项 
                  2、不设置exact时（注意：完全匹配 from），只要输入的路径，所有route匹配不上，都会被重定向到home中，
                      但是设置后，只有为空或/时，才被重定向到home中
                  3、所有都匹配不上，去404页面
              */}
          <div className={AppStyle.content}>
            <Switch>
              <Route path="/user" component={User}></Route>
              <Route path="/home" component={Home}></Route>
              <Route path="/404" component={Empty}></Route>

              <Redirect exact from="/" to="/home"></Redirect>
              <Redirect to="/404"></Redirect>
            </Switch>
          </div>
        </div>
      </div>
    );
  }
}

export default App;
